<template>
  <div class="blog-item">
    <div class="cover">
      <img :src="cover" v-if="cover" class="cover-img" />
      <img v-else src="../assets/pp.jpg" class="cover-img" />
    </div>
    <div class="content">
      <div class="title">
        <router-link :to="'/homePage/'+blogId" class="a-link" @click="updateBrowseCount">{{ title }}</router-link>
      </div>
      <div class="summary">{{ summary }}</div>
      <div class="info">
        <span class="time">编辑时间: {{ time }}</span>
        <span class="writer"> 作者: <router-link to="/web-user" class="a-link">{{ writer }}</router-link></span>
        <span class="categoryName">分类: <router-link :to="'/web-category/' + categoryId" class="a-link">{{ categoryName }}</router-link></span>
        <div class="like-button" @click="likeAction">
          <span class="iconfont" :class="props.isLike === 0 ? 'icon-dianzan1' : 'icon-dianzan3'"></span>
          <span>{{ props.isLike ? '已点赞' : '点赞' }}</span>
          <span>{{ likes }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';

const jwtToken = localStorage.getItem('jwtToken');
const axiosInstance = axios.create({
  headers: {
    'Token': jwtToken, // 将JWT令牌放入请求头的token字段
  },
});

const likenum = props.likes;
const updateBrowseCount = () => {
  axiosInstance
      .put(`http://localhost:8080/updatebrowse/${props.blogId}`)
      .then((response) => {})
      .catch((error) => {
        console.error('更新失败', error);
      });
};

const localIsLike = ref(props.isLike);
const isLike = ref(0);
const tokenData = JSON.parse(decodeURIComponent(escape(atob(jwtToken.split('.')[1]))));
const userId = tokenData.id;

const likeAction = () => {
  axiosInstance
      .put(`http://localhost:8080/like/${props.blogId}/${userId}`)
      .then((response) => {
        console.log('点赞成功');
        window.location.reload(); // 刷新页面
      })
      .catch((error) => {
        console.error('点赞失败', error);
      });
};

const props = defineProps({
  blogId: {
    type: String,
  },
  cover: {
    type: String,
  },
  title: {
    type: String,
  },
  summary: {
    type: String,
  },
  time: {
    type: String,
  },
  writer: {
    type: String,
  },
  categoryName: {
    type: String,
  },
  categoryId: {
    type: Number,
  },
  likes: {
    type: Number,
  },
  isLike: {
    type: Number,
  },
});
</script>

<style lang="scss">
.blog-item {
  display: flex;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  margin-bottom: 20px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }

  .cover {
    width: 120px;
    height: 120px;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    margin-right: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
  }

  .content {
    flex: 1;

    .title {
      font-size: 18px;
      color: #1890ff;
      font-weight: bold;
      margin-bottom: 8px;
      text-decoration: none;
      transition: color 0.2s ease;

      &:hover {
        color: #40a9ff;
      }
    }

    .summary {
      font-size: 14px;
      color: #999;
      line-height: 1.6;
      margin-bottom: 12px;
      word-break: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .info {
      font-size: 14px;
      color: #5f6471;

      .categoryName {
        margin-right: 10px;
      }

      .writer {
        margin-right: 10px;
      }

      .time {
        margin-right: 10px;
        font-size: 13px;
      }
    }

    .like-button {
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
      color: #5f6471;
      transition: color 0.3s ease;

      &:hover {
        color: #1890ff;
      }

      .iconfont {
        font-size: 20px;
        margin-right: 5px;
        transition: transform 0.2s ease;
      }

      &:hover .iconfont {
        transform: scale(1.2);
      }
    }
  }
}
</style>
